<template>
  <div>
    <el-form :inline="true" :modal="searchDto">
      <el-form-item v-if="this.roleType === '1'">
        <v-distpicker @selected="OnProvinceSelected" :provinceOut="searchDto.provinceCode" only-province></v-distpicker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchDto.modelId" clearable placeholder="型号">
          <el-option
            v-for="item in modelOptions"
            :key="item.id"
            :label="item.code"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchDto.sn" placeholder="请输入SN号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="excelExport()">数据导出</el-button>
      </el-form-item>
    </el-form>
    <custom-table
      :data="scrapList"
      :columns="columns"
      :tableLoadingFlag="tableLoadingFlag"
      :operationColumn="operationColumn"
      :pagination="pagination">
    </custom-table>
    <el-dialog title="维修记录" :visible.sync="detailDialogVisible" :close-on-click-modal="false" :before-close="onBtnCancel">
      <repair-list
        :ystsn="ystsn">
      </repair-list>
      <div slot="footer">
        <el-button type="primary" @click="onBtnCancel()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CustomTable from '@/components/table/CustomTable'
  import {apiGetScrapList, apiSpareScrapExport} from '@/api/search/standby/index'
  import { parseTime } from '@/utils'
  import { apiGetModelList } from '@/api/dictionary'
  import { apiGetRepairHistory } from '@/api/stock/index'
  import {getRoleType} from '@/utils/token'
  import RepairList from '../../../components/table/RepairList.vue'
  import {downloadExcel} from "../../../utils";
  export default {
    components: {
      RepairList,
      CustomTable
    },
    created() {
      let listQuery = {
        pageNumber: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }
      this.getScrapList(listQuery)
    },
    data() {
      return {
        tableLoadingFlag: false,
        columns: [
          {label: '省份', name: 'province', align: 'center'},
          {label: '型号', name: 'model', align: 'center'},
          {label: 'SN', name: 'ystsn', align: 'center'},
          {label: '报废时间', name: 'instockTime', align: 'center', formatter: this.formatTime}
        ],
        operationColumn: {
          width: '200',
          operations: [
            {name: '维修病例', callback: this.onBtnRepairHistory}
          ]
        },
        scrapList: [],
        roleType: getRoleType(),
        pagination: this.getData(this.getScrapList),
        searchDto: {
          provinceCode: '',
          modelId: '',
          sn: ''
        },
        modelOptions: this.selectedModelInit(),
        listQuery: {
          provinceCode: undefined,
          modelId: undefined,
          sn: undefined
        },
        detailDialogVisible: false,
        detailTableLoadingFlag: false,
        ystsn: ''
      }
    },
    methods: {
      excelExport() {
        let paramsPost = {
          provinceCode: this.searchDto.provinceCode,
          modelId: this.searchDto.modelId,
          ystsn: this.searchDto.sn
        }
        apiSpareScrapExport(paramsPost).then(response => {
          downloadExcel(response.data, '自有系统备机报废记录信息导出表')
        }).catch(err => {
          console.log(err)
        })
      },
      getScrapList(listQuery) {
        this.tableLoadingFlag = true
        if (this.listQuery.provinceCode !== undefined) {
          listQuery.provinceCode = this.listQuery.provinceCode
        }
        if (this.listQuery.modelId !== undefined) {
          listQuery.modelId = this.listQuery.modelId
        }
        if (this.listQuery.sn !== undefined) {
          listQuery.sn = this.listQuery.sn
        }
        apiGetScrapList(listQuery).then(response => {
          this.scrapList = response.data
          this.pagination.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      onBtnRepairHistory (row) {
        this.detailDialogVisible = true
        this.ystsn = row.ystsn
      },
      formatTime (row, column, cellValue) {
        return parseTime(cellValue)
      },
      searchData() {
        this.listQuery.provinceCode = this.searchDto.provinceCode
        this.listQuery.modelId = this.searchDto.modelId
        this.listQuery.sn = this.searchDto.sn
        this.pagination.currentPage = 1
        this.pagination.pageSize = 10
        this.getScrapList(this.listQuery)
      },
      OnProvinceSelected(data) {
        this.searchDto.provinceCode = data.province.code
      },
      selectedModelInit () {
        apiGetModelList().then(response => {
          let modelList = response.data
          let model = []
          let temp = {}
          for (let i in modelList) {
            if (!temp[modelList[i].code]) {
              temp[modelList[i].code] = modelList[i].id
            }
          }
          model.push({'code': '全部型号', 'value': ''})
          for (let k in temp) {
            model.push({'code': k, 'id': temp[k]})
          }
          this.modelOptions = model
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      onBtnCancel() {
        this.detailTableLoadingFlag = false
        this.tableLoadingFlag = false
        this.detailDialogVisible = false
      }
    }
  }
</script>
